<template>
	<view class="main">
		<beauty-ui 
			@submit="submit" 
			@preview="preview" 
			:isPreview="isPreview" 
			:Id="mainId" 
			:isSingleAudio="isSingleAudio" 
			:editorText="editorText"
			:initData="initData">
		</beauty-ui>
		<preview-ui v-if="isPreview" :viewData="previewData" @submit="submit" @back="back"></preview-ui>
	</view>
</template>
<script>
	import upload from '@/util/upload.js'
	import beautyUi from '@/components/beauty-ui/beauty-ui.vue'
	import previewUi from '@/components/preview-ui/preview-ui.vue'
	export default{
		components:{ beautyUi, previewUi} ,
		data(){
			return{
				isEditor: false,
				//大纲Id
				mainId: '',
				essayType: '',
				isPreview: false,
				previewData: {},
				isSingleAudio: false,
				editorText: '',
				initData: {}
			}
		},
		onLoad(e){
			//编辑用 start
			if(e.isEditor){
				this.isEditor = true
				this.initData = e
			}
			//编辑用 end
			
			this.essayType = e.essayType
			this.mainId = e.mainId
			this.isSingleAudio = e.isSingleAudio
		},
		onShow(e) {
			let pages = getCurrentPages();
			let currPage = pages[pages.length-1];
			let param = currPage.data
			//文本保存
			if(currPage.data.dist){
				//既存卡片修改随笔
				if(param.mark){
					this.editorText = {dist: 'change', html: currPage.data.select_data}
				}
				//新增卡片
				else{
					this.editorText = {dist: 'add', html: currPage.data.select_data}
				}
			}
			//取消保存
			else{
				
			}
		},
		methods:{
			//数据提交
			submit(e){
				//音频作业模式检查
				if(e.isCheckedWork){
					if(!this.checkMoreAudio(e.dtl)){
						return
					}
				}
				let that = this
				//提交
				if(!this.isEditor){
					upload.submit(e, this.essayType, this.mainId).then(()=>{
						uni.showToast({
						    title: '提交成功',
							icon: 'success',
						    duration: 2000,
							success() {
								setTimeout(function(){
									//提交完毕跳转至我的
									uni.redirectTo({
										url: `../meiPianList/meiPianList?hostId=${that.$store.state.user.clientUserId}` 
									})
								},2000)
							}
						})
					})
				}
				//编辑
				else{
					upload.update({id: this.initData.id, ...e}, this.essayType).then(()=>{
						uni.showToast({
						    title: '提交成功',
							icon: 'success',
						    duration: 2000,
							success() {
								setTimeout(function(){
									//提交完毕跳转至我的
									uni.redirectTo({
										url: `../meiPianList/meiPianList?hostId=${that.$store.state.user.clientUserId}` 
									})
								},2000)
							}
						})
					})
				}
			},
			//预览
			preview(e){
				this.previewData = {type: 'preview', dtl: e}
				this.isPreview = !this.isPreview
			},
			//预览退出
			back(){
				this.isPreview = false
			},
			//音频作业模式下检测多余的音频选项卡，并作提示
			checkMoreAudio(list){
				let count = 0
				for(let item of list){
					//已经存在音频，不可以再追加音频选项卡
					if(item.type == 'record'){
						count++
					}
				}
				if(count > 1){
					uni.showToast({
					    title: '音频作业模式下最多可录制一条音频，请删除多余的音频选项卡后再试',
						icon: 'none',
					    duration: 3000
					})
					return false
				}
				return true
			}
		}
	}
</script>
<style lang="scss">
	@keyframes show{
		from{opacity: 0;}
		to{opacity: 1;}
	}
	.main{
		animation: 0.5s show;
		.main-item{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			position: relative;
			font-size: 30rpx;
			padding-left: 10rpx;
			height: 250rpx;
			.left-image{
				width: 250rpx;
				height: 220rpx;
			}
			.edit-text{
				position: relative;
				width: 400rpx;
				height: 210rpx;
				padding: 5rpx 15rpx 5rpx 15rpx;
				border-radius: 10rpx;
				word-wrap: break-word;
				word-break: break-all;
				overflow-x: hidden;
				.placeholder-text{
					color: #878787;
					font-size: 30rpx;
				}
			}
			.right-close{
				position: absolute;
				left: 8rpx;
				top: 12rpx;
				width: 60rpx;
				height: 60rpx;
				transform: rotate(180deg);
			}
			.left-border{
				width: 250rpx;
				height: 220rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #e2e2e2;
				transition: 0.5s;
				.left-image{
					width: 80rpx;
					height: 80rpx;
				}
			}
			.rich-text{
				width: 400rpx;
				padding: 15rpx;
			}
		}
	}
</style>